<template>
  <div class="header_container"  :class="{ headerFixed: propValue.fixed}">
    <div v-if="propValue.img" class="logo1">
      <img
        :src="propValue.img"
        alt=""
        :style="{
          width: propValue.imgwidth + 'rem',
          height: propValue.imgheight + 'rem',
        }"
      />
    </div>
    <div
      class="corporateName"
      :style="{ 'font-size': propValue.companyFont + 'rem' }"
    >
      {{ propValue.corporateName }}
    </div>
    <div class="flex-around list_box" v-if="propValue.radioType == 1">
      <div
        class="list_item"
        @click="changetab(i)"
        v-for="(item, i) of propValue.headerList"
        :key="i"
      >
        <div class="contentmenu">
          <a
            :href="item.link ? item.link : 'javascript:;'"
            style="display: block"
          >
            <div
              :style="{
                color:item.active? itemStyle.activeColor: ''}"
            >
              {{ item.name }}
            </div>
            <!-- <div v-show="item.active"  class="tab_hx"></div> -->
          </a>
        </div>
      </div>
    </div>
    <!-- companyColor -->
    <div class="flex-around list_box" v-else-if="propValue.radioType == 2">
      <div
        class="list_item"
        @click="changetab(i)"
        :style="{
          color:item.active? itemStyle.activeColor: '' }"
        v-for="(item, i) of propValue.headerList"
        :key="i"
      >
        <div class="content contentmenu">
          <a
            :href="item.link ? item.link : 'javascript:;'"
            style="display: block"
          >
            <div
              class="title"
              @mouseenter="Titenter" 
              @mouseleave="Titleave"
              :style="{
                color:item.active? itemStyle.activeColor: ''}"
            >
              {{ item.name }}
            </div>
            <div
              :style="{
                background:item.active? itemStyle.activeColor: '' }"
              v-if="item.active"
              class="tab_hx2"
            ></div>
          </a>
          <ul v-if="item.isChildren" class="childrenMenu">
           <div class="children_jg flex-wrap">
            <li @click="changeCanvasdata(ptem)" v-for="(ptem, p) of item.Children" :key="p">
              <a :href="ptem.link"> {{ ptem.name }}</a>
            </li>
            </div>
          </ul>
        </div>
      </div>
    </div>

    <div class="flex-around list_box" v-else-if="propValue.radioType == 3">
      <div
        class="list_item3"
        @click="changetab(i)"
        :style="{
          color:themeColor?itemStyle.activeColor ? item.active ? itemStyle.activeColor: '' : '':'',
        }"
        v-for="(item, i) of propValue.headerList"
        :key="i"
      >
        <div class="content3 contentmenu">
          <a
            class="flex-center"
            :style="{ background: item.active ? propValue.activeBg : '' }"
            :href="item.link ? item.link : 'javascript:;'"
            style="display: block"
            :class="{ a3: propValue.headerList[i].active }"
          >
            <div
              class="title"
              :style="{
                color: itemStyle.activeColor
                  ? item.active
                    ? itemStyle.activeColor
                    : ''
                  : '',
              }"
            >
              {{ item.name }}
            </div>
          </a>
          <ul v-if="item.isChildren" class="childrenMenu">
           <div class="children_jg flex-wrap">
            <li @click="changeCanvasdata(ptem)"  v-for="(ptem, p) of item.Children" :key="p">
              <a :href="ptem.link"> {{ ptem.name }}</a>
            </li>
           </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    propValue: {
      type: Object,
      default: () => {},
    },
    swiperList: {
      type: Array,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
    itemStyle: "",
  },
  data() {
    return {
      themeColor:''
    };
  },
  methods: {
    Titenter(){
        this.themeColor=localStorage.getItem('themeColor')?localStorage.getItem('themeColor'):''
    },
    Titleave(){
      this.themeColor=''
    },
    changeCanvasdata(ptem){
    let GlobalcanvasData = JSON.parse(
          localStorage.getItem("GlobalcanvasData")
        );
     let Checkname = ptem.link.split("./")[1];
         for (let item of GlobalcanvasData) {
          if (item.name == Checkname) {
            localStorage.setItem("canvasData", JSON.stringify(item.canvasData)); //替换缓存
            this.$store.commit("setComponentData", item.canvasData);
            localStorage.setItem("downloadPage", item.name);
            localStorage.setItem("page", item.name);
            localStorage.setItem("pageName", item.pagename);
          }
        }
    },
    changetab(i) {
      // if(this.propValue.headerList[i].isChildren){
      //     return
      // }

      if(this.propValue.headerList[i].active){//已经被选中再点击就调整header
          let Checkname = this.propValue.headerList[i].link.split("./")[1];
        console.log(Checkname);
        let GlobalcanvasData = JSON.parse(
          localStorage.getItem("GlobalcanvasData")
        );
        for (let item of GlobalcanvasData) {
          if (item.name == Checkname) {
            localStorage.setItem("canvasData", JSON.stringify(item.canvasData)); //替换缓存
            this.$store.commit("setComponentData", item.canvasData);
            localStorage.setItem("downloadPage", item.name);
            localStorage.setItem("page", item.name);
            localStorage.setItem("pageName", item.pagename);
          }
        }
        this.propValue.headerList[i].active = true;
        return
      }

      let pageNameList = [];
      for (let item of this.propValue.headerList) {
        item.active = false;
        pageNameList.push(item.name);
      }
        this.propValue.headerList[i].active = true;

      let pageName = localStorage.getItem("pageName");
      if (!pageNameList.includes(pageName)) {
        //不是header导航
        this.propValue.headerList[i].active = true;
      } else {
        let Checkname = this.propValue.headerList[i].link.split("./")[1];
        console.log(Checkname);
        let GlobalcanvasData = JSON.parse(
          localStorage.getItem("GlobalcanvasData")
        );
        for (let item of GlobalcanvasData) {
          if (item.name == Checkname) {
            localStorage.setItem("canvasData", JSON.stringify(item.canvasData)); //替换缓存
            this.$store.commit("setComponentData", item.canvasData);
            localStorage.setItem("downloadPage", item.name);
            localStorage.setItem("page", item.name);
            localStorage.setItem("pageName", item.pagename);
          }
        }
        this.propValue.headerList[i].active = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.headerFixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
}
.header_container {
  display: flex;
  .logo1 {
    margin: auto 0;
    margin-left: 360rem;
  }
  .corporateName {
    margin: auto;
    margin-left: 30rem;
  }
  .list_box {
    height: 100%;
    position: absolute;
    right: 360rem;
    .list_item {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 103rem;
      text-align: center;
      cursor: pointer;
      .content {
        overflow: inherit;
        height: 100%;
      }
      .content a {
        height: 100%;
        position: relative;
        .title {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: inherit;
        }
        .tab_hx2 {
          width: 103rem;
          height: 4rem;
          border-radius: 8rem;
          position: absolute;
          bottom: 0px;
          left: 50%;
          margin-left: -51.5rem;
        }
      }
    }
  }
}



.list_item3 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120rem;
  text-align: center;
  cursor: pointer;
  .content3 {
    height: 100%;
    width: 100%;
    // position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    a {
      height: 100%;
      width: 100%;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }

    .title3 {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
          color: inherit;
    }
  }
  .a3 {
    // background: #0061FF;
    color: #fff;
  }
}
// .list_item3 {
//     margin: auto;
//     position: relative;
//     width: 120rem;
//     text-align: center;
//     cursor: pointer;
//     .a3 {
//         background: #0061FF;
//         color: #fff;
//     }
// }
.children_jg{
  width: 100%;
  // height:210rem;
  background: #fff;
  border-radius: 6rem;
  padding: 13rem 0;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

}
.childrenMenu {
  width: 720rem;
  position: absolute;
  padding-top: 12rem;
  left: 0;
  text-align: center;
  margin: auto;
  display: none;
  display: flex;
  flex-wrap: wrap;
  opacity: 0;
  display: none;
    // background: #fff;
  // border-top: 12rem solid rgba(255, 255, 255, 0);
  transition: 0.3s;
  li {
    width:33%;
    padding:0 20rem;
    font-size: 14rem;
    margin: 13rem 0;
    text-align: left;
    transition: 0.2s;
  }
  li:first-child {
    border-top-left-radius: 17rem;
    border-top-right-radius: 17rem;
  }
  li:last-child {
    border-bottom-left-radius: 17rem;
    border-bottom-right-radius: 17rem;
  }
  // li:hover {
  //   // box-shadow: 0 4px 12px 0 rgb(0 0 0 / 10%);
  //   color: #0061FF;
  //   font-weight: 500;
  // }

}
.contentmenu {
  width: 100%;
}
.contentmenu:hover .childrenMenu {
  display: block;
  opacity: 1;
}
a {
  width: 100%;
  // color: inherit;
}
.childrenMenu li>a:hover{
      color: #0061FF;
    font-weight: 500;
}

</style>
